{% extends "./layout.html" %}

{% block title %}{{ page.title }} · {{ super() }}{% endblock %}

{% block description %}{{ page.description }}{% endblock %}

{% block head %}
    {{ super() }}
    <link href="{{ 'icons.css'|resolveAsset }}" type="text/css" rel="stylesheet">
    {% if page.next and page.next.path %}
    <link rel="next" href="{{ page.next.path|resolveFile }}" />
    {% endif %}
    {% if page.previous and page.previous.path %}
    <link rel="prev" href="{{ page.previous.path|resolveFile }}" />
    {% endif %}
{% endblock %}

{% block javascript %}
    <script src="{{ 'materialize.js'|resolveAsset }}"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.book-summary');
        var instances = M.Sidenav.init(elems, {
          preventScrolling: false,
        });
      });
    </script>
    <script src="{{ 'dartbook.js'|resolveAsset }}"></script>
{% endblock %}

{% block body %}
<div class="book">
    {% include "./header.html" %}
    <div id="slide-out" class="book-summary">
        {% block book_sidebar %}
            {% block sidebar_header %}{% endblock %}
            {% block book_summary %}
                {% include "./summary.html" %}
            {% endblock %}
        {% endblock %}
    </div>

    <div class="book-body">
        {% block book_body %}
            <div id="body-container" class="body-inner">
                <div class="book-ribbon"></div>
                {% block book_inner %}

                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                                <section class="normal markdown-section">
                                {% block page %}
                                {{ page.content|safe }}
                                {% endblock %}
                                </section>
                        </div>
                    </div>
                {% endblock %}
            </div>

            {% block book_navigation %}
            <ul class="paging-group center">
              <li class="waves-effect waves-light {% if page.previous and page.previous.path %}active{% else %}disabled{% endif %}">
                <a {% if page.previous and page.previous.path %}href="{{ page.previous.path|resolveFile }}{{ page.previous.anchor }}"{% endif %} {% if page.previous and page.previous.path %}aria-label="{{ page.previous.title }}"{% endif %}><i class="large material-icons">chevron_left</i></a>
              </li>
              <li class="waves-effect waves-light {% if page.next and page.next.path %}active{% else %}disabled{% endif %}">
                <a {% if page.next and page.next.path %}href="{{ page.next.path|resolveFile }}{{ page.next.anchor }}"{% endif %} {% if page.next and page.next.path %}aria-label="{{ page.next.title }}"{% endif %}><i class="large material-icons">chevron_right</i></a>
              </li>
            </ul>
            {% endblock %}
        {% endblock %}
    </div>
</div>
{% endblock %}
